<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>USER TABLE</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../Res/LayUI/css/layui.css" media="all">
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<style type="text/css">
img{
	width:40px;
	height: 40px;
}
.invisible {
  height: .5rem;
  top: .7rem;
}
.visible {
  height: .8rem;
  top: .55rem;
}
</style>
</head>
<body>
	<div class="demoTable">
		模块名：
		<div class="layui-inline">
			<input class="layui-input" id="namemod">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
		<button class="layui-btn layui-btn-primary" onclick="add();">添加</button>
	</div>
	<table class="layui-table"
		lay-data="{width: 1220,url:'../../moduleAction/showList.action', page:true, id:'idTest'}"
		lay-filter="demo">
		<thead>
			<tr>
				<th lay-data="{type:'checkbox', fixed: 'left'}"></th>
				<th lay-data="{field:'modId', width:80, sort: true, fixed: true, align:'center'}">ID</th>
				<th lay-data="{field:'url', width:80, align:'center'}">URL</th>
				<th lay-data="{field:'modName', width:95, align:'center'}">模块名称</th>
				<th lay-data="{field:'modCode', width:95, align:'center'}">模块编码</th>
				<th lay-data="{field:'modDesc', width:100, align:'center'}">模块说明</th>
				<th lay-data="{field:'oper', width:90, align:'center'}">操作人</th>
				<th lay-data="{fixed:'right', width:135, align:'center', toolbar: '#barDemo'}">操作</th>
			</tr>
		</thead>
	</table>
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script src="../../Res/LayUI/layui.js" charset="utf-8"></script>
	<script>
		layui.use('table', function() {
			var table = layui.table;
			//监听表格复选框选择
			table.on('checkbox(demo)', function(obj) {
				console.log(obj)
			});
			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if (obj.event === 'del') {
					layer.confirm('确定删除该用户吗？', function(index) {
						layer.close(index);
						var id = data.modId;
						var url = "../../moduleAction/delete.action";
						var datas = {
							'modId' : id
						}; 
						$.ajax({
							asyn : true,
							type : "POST",
							url : url,
							data : datas,
							success : function(msg) {
								 layer.msg("删除成功");
								table.reload('idTest');
							},
							error : function(fh) {
								layer.msg(msg.msg);
							}
						});
					});
				} else if (obj.event === 'edit') {
					layer.confirm('<input type="hidden" name="modId" >'
							+'模块名：<input type="text" name="modName" id="modName" lay-verify="title" placeholder="请输入模块名" value='+data.modName+' class="layui-input" maxlength="9"><br/>'
							+'URL：<input type="text" name="url" id="url" lay-verify="title" placeholder="请输入URL" value='+data.url+' class="layui-input" maxlength="15"><br/>'
							+'编码号：<input type="text" name="modCode" id="modCode" value='+data.modCode+' placeholder="请输入编码号" lay-verify="title" class="layui-input" maxlength="9"><br/>'
							+'模块说明：<input type="text" name="modDesc" id="modDesc" value='+data.modDesc+' lay-verify="title" placeholder="请输入模块说明" class="layui-input" maxlength="15"><br/>'
							+'操作时间：<input type="date" name="optime" id="optime" value='+data.optime+' lay-verify="date" placeholder="请输入操作时间" class="layui-input"  ><br/>'
							+'操作人：<input type="text" name="oper" id="oper" value='+data.oper+' placeholder="请输入操作人" class="layui-input" maxlength="9" ></br>',
							function(index) {
								
						layer.close(index);
					    var modName=$("#modName").val();
					    var url1=$("#url").val();
					    var modCode=$("#modCode").val();
					    var modDesc=$("#modDesc").val();
					    var oper=$("#oper").val();
					    
						var id = data.modId;
						var url = "../../moduleAction/updateModule";
						var datas = {
							'modId' : id,'modName' : modName,'url' : url,'modCode' : modCode,'modDesc' : modDesc,'oper' : oper
						};
						$.ajax({
							asyn : true,
							type : "POST",
							url : url,
							data : datas,
							success : function(msg) {
								 layer.msg("修改成功");
								table.reload('idTest');
							},
							error : function(fh) {
								layer.msg(msg.msg);
							}
						});
					});
					
				}
			});
			var $ = layui.$, active = {
				reload : function() {
					//执行重载
					table.reload('idTest', {
						where : {
							'modName' : $("#namemod").val()
						},
						page : {
							curr : 1
						}
					});
				}
			};
			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
		function add() {
			layer.msg('<form action="../../moduleAction/addModule" method="post">'
					+'模块名：<input type="text" name="modName" id="modName" lay-verify="title" placeholder="请输入模块名" class="layui-input" maxlength="9" ><br/>'
					+'URL：<input type="text" name="url" id="url" lay-verify="title" placeholder="请输入URL" class="layui-input" maxlength="15" ><br/>'
					+'编码号：<input type="text" name="modCode" id="modCode" placeholder="请输入编码号" lay-verify="title" class="layui-input" maxlength="15" ><br/>'
					+'模块说明：<input type="text" name="modDesc" id="modDesc" lay-verify="title" placeholder="请说明模块" class="layui-input" maxlength="15" ><br/>'
					+'操作人：<input type="text" name="oper" id="oper" placeholder="请输入操作人姓名" class="layui-input" maxlength="9" ></br>'
					+'<input type="submit" id="bc" value="保存" align="center">'
					+'</form>',{
				        time: 200000000, 
				        btn: ['取消操作']
			});
			 $("#bc").click(function(){
				 layer.msg("增加成功");
				  });
		}
	</script>
</body>
</html>